<template>
  <div ref="securityFundsAdd" class="_wz_securityFundsAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
      <FormItem label="安全费用名目" prop="planItemId">
        <i-select v-model.number="formData.planItemId" filterable placeholder="请选择安全费用名目" :label-in-value="true" @on-change="planItemNameFun" clearable>
          <Option v-for="item in namesList" :value="item.id" :key="item.id">{{ item.planItemName }}</Option>
        </i-select>
      </FormItem>
      <FormItem label="投入使用月份" prop="expenditureMonth">
        <i-select v-model="formData.expenditureMonth" filterable placeholder="请选择投入使用月份" clearable>
          <Option value="1">1月份</Option>
          <Option value="2">2月份</Option>
          <Option value="3">3月份</Option>
          <Option value="4">4月份</Option>
          <Option value="5">5月份</Option>
          <Option value="6">6月份</Option>
          <Option value="7">7月份</Option>
          <Option value="8">8月份</Option>
          <Option value="9">9月份</Option>
          <Option value="10">10月份</Option>
          <Option value="11">11月份</Option>
          <Option value="12">12月份</Option>
        </i-select>
      </FormItem>
      <FormItem label="提取金额（万）" prop="expenditureExtractAmount">
        <i-input v-model.number="formData.expenditureExtractAmount" placeholder="请填写提取金额（万）" clearable/>
      </FormItem>
      <FormItem label="支出金额（万）" prop="expenditureAmount">
        <i-input v-model.number="formData.expenditureAmount" placeholder="请填写支出金额（万）" clearable/>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <i-input v-model="formData.remark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}"/>
      </FormItem>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="formOperationFun">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>

  </div>
</template>
<script>
  export default {
    //modify 修改 add 新增
    // 需要修改的数据  表单类型  打开方式
    props: ["selectdata", 'summaryData'],//接收来自父组件的数据
    data() {
      return {
        formData: {},//表单数据
        ruleValidate: {//正则
          planItemId: [
            {type: 'number', required: true, message: '请选择安全费用名目', trigger: 'blur'}
          ],
          expenditureMonth: [
            {required: true, message: '请选择投入使用月份', trigger: 'blur'}
          ],
          expenditureExtractAmount: [
            {type: 'number', required: true, message: '请填写提取金额（万）', trigger: 'blur'}
          ],
          expenditureAmount: [
            {type: 'number', required: true, message: '请填写支出金额（万）', trigger: 'blur'}
          ],
        },
        namesList: [],//名目list
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      //名目
      that.axios.get(that.apiUrl.safetyBudgetPlanItemList + that.summaryData.id)
      .then(res => {
        if (!!res) {
          that.namesList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })


      if (!!!that.selectdata) {
        that.formData = {};//表单
      } else {
        that.formData = JSON.parse(JSON.stringify(that.selectdata));//表单
      }


    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            if (!!!that.selectdata) {
              that.formData.deptName = that.summaryData.deptName;
              that.formData.deptUuid = that.summaryData.deptUuid;
              that.formData.planId = that.summaryData.id;
              that.formData.planYear = that.summaryData.planYear;
            }


            that.$Spin.show();//显示加载

            that.axios.post(that.apiUrl.safetyBudgetExpenditureSaveOrUpdate, that.formData)
            .then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("数据保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //表单关闭
      formOperationFun() {
        this.$emit("closeFun", false)
      },
      //名目
      planItemNameFun(e) {
        if (!!e) {
          this.formData.planItemName = e.label;
        } else {
          this.formData.planItemName = "";
        }
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less" scoped>
  ._wz_securityFundsAdd {
    .demo-drawer-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }
  }


</style>
